<template>
    <el-form width="80%" title="关联产品" >
        <template #default>
            <!-- 工具栏部分结束 -->
            <!-- 列表部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-table ref="matTable" @selection-change="handleSelectionChange" :data="mats" border :stripe="true" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="matCode" label="产品物料编码"  />
                        <el-table-column prop="matName" label="产品物料名称"  />
                        <el-table-column prop="matModel" label="规格型号"  />
                        <el-table-column prop="matUnitName" label="单位" />
                    </el-table>
                </el-col>
            </el-row>
            <!-- 列表部分结束 -->
            <!-- 分页部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit" :total="total" />
                </el-col>
            </el-row>
            <!-- 分页部分结束 -->

        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-form>
</template>

<script>
import {watch} from "vue";
import TechniqueMatRequest from '../../../../api/techniqueMat.js';
export default {
    props:["techniqueId"],// 属性
    emits:["optionCompleted"],// 暴露的事件
    name: "mat.vue",
    components:{},
    data(){//数据模型
        return{
            dialogVisible: false, // 弹窗标记
            queryMat:{},// 绑定查询条件
            mats:[],// 存储查询的关联产品
            total:0,// 总记录数
            limit:10,// 每页显示的记录
            currentPage:1,// 当前页码
            editBtnDisabled:true,// 编辑按钮是否禁用
            deleteBtnDisabled:true,// 删除按钮是否禁用
            currentStepType:undefined,

            //processId:'',
            editProcessVisible:false,
            editProcessStepId:-1,

            composeAddWinDialogVisible:false,
            composeEditWinDialogVisible:false
        }
    },methods:{
        /**
         * 翻页事件
         */
        pageChange(currentPage,currentLimit){

        },
        /**
         * 选中行变化事件
         */
        handleSelectionChange(){
            let selectionRows = this.$refs.matTable.getSelectionRows();
            if (selectionRows.length == 0) {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = true;
            } else if (selectionRows.length == 1) {
                this.editBtnDisabled = false;
                this.deleteBtnDisabled = false;
            } else {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = false;
            }
        },
        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        },
        /**
         * 加载关联产品
         */
        loadMats(techniqueId){
            // 准备参数
            this.queryMat.page = this.currentPage;
            this.queryMat.limit = this.limit;
            // this.queryMat.techniqueId = this.currentStepType;
            if(techniqueId)
                this.queryMat.techniqueId = techniqueId;
            TechniqueMatRequest.loadTechniqueMat(this.queryMat,res => {
                console.log(res)
                // 赋值
                this.mats = res.data.data;
                this.total = res.data.total;
            });
        }
    },mounted(props) {
        console.log(this.techniqueId)
        this.loadMats(this.techniqueId);
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            if(this.dialogVisible){
                this.loadMats(this.techniqueId);
            }
        });
        watch(()=>this.techniqueId,(newVal,oldVal)=>{
            console.log(this.techniqueId)
            this.currentStepType = newVal;
            if(this.dialogVisible){
                this.loadMats(this.techniqueId);
            }
        });

    }
}
</script>

<style scoped>

</style>